import { Table, TableProps } from 'antd';
import React from 'react';

export interface IPageTablePageData<T = any> {
    /**具体的数据 */
    data: T[],
    /**数据总行数 */
    total: number
}

interface IPageTableProps<T = any> extends TableProps<T> {
    /**一页展示的数量 */
    pageSize?: number,
    /**分页获取数据的方法 */
    func: (pageNo: number, pageSize: number) => Promise<IPageTablePageData<T>>,
    /**当选择了行 */
    rowSelect?: boolean,
    /**初始化是否自动拉取数据 */
    firstRefresh?: boolean
}

interface ICTtableState<T> {
    /**页码 */
    pageNo: number,
    pageSize: number,
    data: T[],
    total: number,
    loading: boolean,
    dataSource: { pageNo: number, pageSize: number, dataSource: T[] }[],
    selectedRows: T[]
}


export default class PageTable<T = any> extends React.Component<IPageTableProps<T>, ICTtableState<T>> {
    static defaultProps = {
        pageSize: 10,
        rowSelect: false,
        firstRefresh: true
    }


    constructor(props: IPageTableProps) {
        super(props);
        this.state = {
            pageNo: 1,
            pageSize: 10,
            data: [],
            total: 0,
            loading: false,
            dataSource: [],
            selectedRows: []
        }
    }
    componentDidMount() {
        this.props.firstRefresh && this.getData();
    }
    refresh = () => {
        this.setState({
            data: [],
            dataSource: [],
            total: 0
        }, () => {
            setTimeout(() => {
                this.onChange(1, this.state.pageSize)
            }, 50)
        });
    }
    /**
     * 当页码改变
     * @param pageNo 页码
     * @param pageSize 页数
     */
    onChange = (pageNo: number, pageSize: number) => {
        let _data = this.state.dataSource;
        let _findIndex = _data.findIndex(p => p.pageNo === pageNo);
        // console.log(_findIndex > -1&&pageSize===_data[_findIndex].pageSize,_data[_findIndex]?.pageSize)
        if (_findIndex > -1 && pageSize === _data[_findIndex].pageSize) {
            /// 找到了 不用重复刷新
            this.setState({
                pageNo,
                pageSize,
                data: _data[_findIndex].dataSource
            })
            return;
        }
        else {
            if (_findIndex > -1) {
                _data.splice(_findIndex, 1);
            }
            /// 刷新数据
            this.setState({
                pageNo,
                pageSize,
                dataSource: [..._data]
            }, this.getData);
        }
    }
    getData = () => {
        const { dataSource } = this.state;
        this.setState({ loading: true });
        this.props.func(this.state.pageNo, this.state.pageSize!).then(p => {
            var _data = dataSource;
            _data.push({
                pageNo: this.state.pageNo,
                dataSource: p.data,
                pageSize: this.state.pageSize
            })
            this.setState({ data: p.data, total: p.total, dataSource: _data });
        })
            .finally(() => {
                this.setState({ loading: false });
            })
    }
    render() {
        const _props = this.props as any;
        return (
            <Table className="hr-common-table"
                rowSelection={
                    this.props.rowSelect ? {
                        type: "checkbox",
                        selections: this.state.selectedRows,
                        onChange: (selectedRowKeys: React.Key[], selectedRows: T[]) => {
                            this.setState({ selectedRows })
                        },
                        // getCheckboxProps: (record: any) => ({
                        //     disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        //     name: record.name,
                        // }),
                    } : null}
                loading={this.state.loading}
                pagination={
                    {
                        showSizeChanger: false,
                        current: this.state.pageNo,
                        pageSize: this.props.pageSize,
                        hideOnSinglePage: true,
                        total: this.state.total,
                        onChange: this.onChange
                    }
                }
                size="small"
                bordered
                dataSource={this.state.data as any}
                {..._props}
            />
        );
    }
}